<template>
  <div class="index">
    <div class="formBox">
        <p class="item"><span class="name">广告名称 ：</span><input v-model="date.ad_name" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">广告图片 ：</span>
            <img class="t2" :src="date.ad_logo">
            <a href="javascript:;" class="file">选择文件<input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png"></a>
        </p>
        <p class="item"><span class="name">广告标题 ：</span>
            <input v-model="date.ad_title" value="" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">广告链接 ：</span>
            <input v-model="date.ad_url" value="" class="solt" placeholder="请输入内容"></input>
        </p>

        <p class="item"><span class="name">广告文本 ：</span>
            <input v-model="date.ad_text" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item inputBox">
          <button @click="submit" class="submitInput">确定</button>
          <button @click="empty" class="emptyInput">重置</button>
        </p>
    </div>
    
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'

export default {
  name: 'index',
  data() {
    return {
        list:[],
        listId:'',
        last:1,//顶级分类
        date:{
          ad_position:2,
          ad_name:'',
          ad_title:'',
          ad_logo:'',
          ad_url:'',
          ad_text:''
        }
    }
  },
  mounted(){

  },
  watch:{
  },
  created(){

  },
  computed:{
    //检查表单
    VueFrom(){
      if(this.Input(this.date.goods_name)&&this.Input(this.date.goods_logo)&&this.Input(this.date.goods_price)&&this.Input(this.date.goods_number)){
        return true
      }else{
        return false
      }
    },
    sonData(){
      let data
      for(let i=0;i<this.list.length;i++){
        if(this.list[i].id==this.last){
          data=this.list[i].son
        }
      }
      return data
    }
  },

  methods: {
    async submit() {
        this.$store.dispatch("loadOpen");
        let that=this
        let data={
            "ad_position":this.date.ad_position,
            "ad_name":this.date.ad_name,
            "ad_title":this.date.ad_title,
            "ad_logo":this.date.ad_logo,
            "ad_url":this.date.ad_url,
            "ad_text":this.date.ad_text
        };
        console.log(data)
        await Post('/ad',this.$store.state.token,data).then((reg)=>{
          console.log(reg)
          this.$store.dispatch("loadClose")
          this.$router.push('/bannerList')
        }).catch(function(err){
          console.log(err)
          alert(err.data.message);
          this.$store.dispatch("loadClose");
        }.bind(this))
        
    },
    //清空信息
    empty() {
      for(var key in this.date){
        this.date[key]=''
      }
    },
    //图片上传
    upImg(e){
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.date.ad_logo=this.result 
        } 
      } 
    }

  }
}

</script>
